import { useNavigate } from 'react-router'
import dayjs from 'dayjs'
import { Badge, BadgeProps, Button, Popover, Space, Tag } from 'antd'
import Icon, { EyeOutlined } from '@ant-design/icons'
import { SelectionColumnDef } from '@ag-grid-community/core'

import { addAGCellTexty } from '@oBiz/components/addTexty'
import { TCellParams, TCol } from '../../interface'
import {
  getNextUpdateTimeRemindDesc,
  getShipTrackStatusDesc,
  getStaffTypeName,
  getWaybillStatusName,
} from '../../utils'
import SignalSvg from '@/assets/icons/signal.svg?react'
import UpdateTimeSvg from '@/assets/icons/updateTime.svg?react'
import styles from './styles.module.less'

export const columnDefsConfig = [
  {
    headerName: '运单号',
    field: 'waybillNo',
  } satisfies TCol<'waybillNo'>,
  {
    headerName: 'FBA ID',
    field: 'fbaId',
  } satisfies TCol<'fbaId'>,
  {
    headerName: '提示',
    field: 'nextUpdateTimeRemind',
  } satisfies TCol<'nextUpdateTimeRemind'>,
  {
    headerName: '发货日期',
    field: 'shipmentDate',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD) : ''),
  } satisfies TCol<'shipmentDate'>,
  {
    headerName: 'Age',
    field: 'age',
  } satisfies TCol<'age'>,
  {
    headerName: 'EDD',
    field: 'currentEdd',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD) : ''),
  } satisfies TCol<'currentEdd'>,
  {
    headerName: '签收日期',
    field: 'signingTime',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD) : ''),
  } satisfies TCol<'signingTime'>,
  {
    headerName: 'Delivery Window',
    field: 'scheduledDeliveryTimeSlot',
    minWidth: 180,
  } satisfies TCol<'scheduledDeliveryTimeSlot'>,
  {
    headerName: '主状态',
    field: 'waybillStatus',
    valueFormatter: ({ value: v }) => getWaybillStatusName(v) || '',
  } satisfies TCol<'waybillStatus'>,
  {
    headerName: '最新路由',
    field: 'latestEventEn',
  } satisfies TCol<'latestEventEn'>,
  {
    headerName: '发生时间',
    field: 'latestEventTime',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD_Hm) : ''),
  } satisfies TCol<'latestEventTime'>,
  {
    headerName: '物流产品',
    field: 'logisticsProductName',
  } satisfies TCol<'logisticsProductName'>,
  {
    headerName: '物流渠道',
    field: 'logisticsChannelName',
  } satisfies TCol<'logisticsChannelName'>,
  {
    headerName: '客户',
    field: 'customer',
  } satisfies TCol<'customer'>,
  {
    headerName: '件数',
    field: 'boxNum',
  } satisfies TCol<'boxNum'>,
  {
    headerName: '国家',
    field: 'destinationCountry',
  } satisfies TCol<'destinationCountry'>,
  {
    headerName: '地址代码',
    field: 'destinationCode',
  } satisfies TCol<'destinationCode'>,
  {
    headerName: '服务商',
    field: 'logisticsChannelMerchantServers',
  } satisfies TCol<'logisticsChannelMerchantServers'>,
  {
    headerName: '转单号',
    field: 'logisticsChannelTrackingNumber',
  } satisfies TCol<'logisticsChannelTrackingNumber'>,
  {
    headerName: '船名航次',
    field: 'vesselName',
  } satisfies TCol<'vesselName'>,
  {
    headerName: '柜号',
    field: 'containerNumber',
  } satisfies TCol<'containerNumber'>,
  {
    headerName: 'ETD',
    field: 'etd',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD) : ''),
  } satisfies TCol<'etd'>,
  {
    headerName: 'ETA',
    field: 'eta',
    valueFormatter: ({ value: v }) => (v ? dayjs(v).$formatSmart($F_MD) : ''),
  } satisfies TCol<'eta'>,
  {
    headerName: '人员',
    field: 'staffInfoList',
  } satisfies TCol<'staffInfoList'>,
  {
    field: 'action',
    headerName: '操作',
    pinned: 'right',
    width: 120,
  } satisfies TCol<'action'>,
]

export const Cell = (p: TCellParams) => {
  const { data } = p
  const { field } = p.colDef || {}
  const navigate = useNavigate()
  switch (field) {
    case 'nextUpdateTimeRemind': {
      return (
        <Space>
          <Popover content={getNextUpdateTimeRemindDesc(data?.nextUpdateTimeRemind)}>
            {data?.nextUpdateTimeRemind !== 5 && (
              <Icon
                component={UpdateTimeSvg}
                style={{
                  color:
                    getNextUpdateTimeRemindDesc.colorList[
                      data?.nextUpdateTimeRemind as keyof typeof getNextUpdateTimeRemindDesc.colorList
                    ],
                }}
              />
            )}
          </Popover>
          <Popover content={getShipTrackStatusDesc(data?.shipTrackStatus)}>
            <Icon
              component={SignalSvg}
              style={{
                color:
                  getShipTrackStatusDesc.colorList[
                    data?.shipTrackStatus as keyof typeof getShipTrackStatusDesc.colorList
                  ],
              }}
            />
          </Popover>
        </Space>
      )
    }
    case 'waybillStatus': {
      return (
        <Tag color={getWaybillStatusName.colorList[data?.waybillStatus as keyof typeof getWaybillStatusName.colorList]}>
          {getWaybillStatusName(data?.waybillStatus)}
        </Tag>
      )
    }
    case 'latestEventEn': {
      const messageTypeColor: Record<number, BadgeProps['status']> = {
        1: 'success',
        2: 'warning',
        3: 'error',
      }
      return (
        <Space>
          <Badge status={messageTypeColor[data?.messageType as keyof typeof messageTypeColor]} />
          {addAGCellTexty({ ...p, value: data?.latestEventEn || '-' })}
        </Space>
      )
    }
    case 'staffInfoList': {
      return data?.staffInfoList?.map(item => (
        <Popover
          key={item?.user?.id}
          content={
            <div>
              <img className={styles.user_avatar} src={item?.user?.avatar || ''} />
              {item?.user?.name || '-'} <Tag>{getStaffTypeName(item?.staffType)}</Tag>
            </div>
          }
        >
          <img className={styles.user_avatar} src={item?.user?.avatar || ''} />
        </Popover>
      ))
    }
    case 'vesselName': {
      return addAGCellTexty({ ...p, value: `${data?.vesselName || '-'} ${data?.voyageNumber || '-'} ` })
    }
    case 'action': {
      return (
        <Space>
          <Button
            icon={<EyeOutlined />}
            type="link"
            onClick={() => navigate(`/biz/trackManage/list/detail/${data?.waybillNo || ''}`)}
          />
          {/* <Button icon={<EllipsisOutlined />} type="link" /> */}
        </Space>
      )
    }
    default: {
      return addAGCellTexty(p)
    }
  }
}

export const defaultColDefConfig = { sortable: false, cellRenderer: Cell }

export const selectionColumnDefConfig: SelectionColumnDef = {
  sortable: true,
  resizable: true,
  width: 120,
  suppressHeaderMenuButton: false,
  pinned: 'left',
}
